import { ProFormSelect, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
import ProForm, {
  ModalForm,
  ProFormGroup,
  ProFormInstance,
  ProFormTextArea,
} from '@ant-design/pro-form';
import React, { useRef } from 'react';

type FormProps = {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (name: string, remark?: string) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, onCancel, onSubmit } = props;
  if (!visible) {
    return <></>;
  }

  // const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const handleFormSubmit = async () => {
    let name = formRef.current?.getFieldValue('name');
    let remark = formRef.current?.getFieldValue('remark');

    onSubmit(name, remark);
  };

  return (
    <ModalForm
      width={900}
      open={visible}
      title="复制配置模板"
      onFinish={handleFormSubmit}
      formRef={formRef}
      modalProps={{
        onCancel: onCancel,
        //destroyOnClose: false,
        maskClosable: false,
      }}
    >
        <ProFormGroup>
          <ProFormText
            name="name"
            label="名称"
            rules={[{ required: true, message: '请输入名称' }]}
            placeholder="请输入名称"
            width={600}
          />
          <ProFormTextArea name="remark" label="备注" width={800} />
        </ProFormGroup>
    </ModalForm>
  );
};

export default Form;
